<template>
  <div>
    <a-form :model="form" layout="vertical" @submit-success="submit">
      <a-card :bordered="false">
        <a-form-item required label="图片" field="picture">
          <a-card>
            <common-upload @success="success" accept="image/*">
              <div class="text-[2rem]">
                <icon-upload />
              </div>
              <div class="text-[1.5rem]">上传图片</div>
            </common-upload>
            <input type="hidden" v-model="form.picture" />
          </a-card>
        </a-form-item>
        <a-form-item label="链接" field="link">
          <a-input v-model="form.link"></a-input>
        </a-form-item>
        <a-form-item label="链接类型" field="linkTarget">
          <a-input v-model="form.linkTarget"></a-input>
        </a-form-item>
        <a-form-item label="开始时间" field="beginTime">
          <a-input v-model="form.beginTime"></a-input>
        </a-form-item>
        <a-form-item label="结束时间" field="endTime">
          <a-input v-model="form.endTime"></a-input>
        </a-form-item>
        <a-form-item label="启用状态" field="enable">
          <a-input v-model="form.enable"></a-input>
        </a-form-item>
        <a-form-item label="排序" filed="sort">
          <a-input-number v-model="form.sort"></a-input-number>
        </a-form-item>
        <a-button :loading="loading" long type="primary" html-type="submit"> 确定 </a-button>
      </a-card>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { addCarousel, updateCarousel } from "@/api/service/carousel/carousel";
import { list } from "../data/curd";
import { form, showForm } from "../data/form";
import { FileItem } from "@arco-design/web-vue";

const loading = ref(false);
const submit = async () => {
  loading.value = true;
  if (form.value.id) {
    await updateCarousel(form.value);
  } else {
    await addCarousel(form.value);
  }
  loading.value = false;
  list();
  showForm.value = false;
};

const success = async (item: FileItem) => {
  const { data } = await item.response;
  form.value.picture = data;
};
</script>

<style lang="scss" scoped></style>
